<template>
  <div class="home">
    <home-nav-bar class="home-nav-bar-bak"></home-nav-bar>
    <!-- 内容滚动 -->
    <bscroll>
      <home-swiper :banners="bannerList"></home-swiper>
      <home-recommend
        :recommends="recommendList"
        titleColor="color:grey;font-size:12px"
        class="home-recommend"
      >
      </home-recommend>
      <week-hot></week-hot>
      <tab-control
        :tabStyle="tabStyle"
        :titles="titles"
        class="tab-control"
        @tabClick="tabClick"
      >
      </tab-control>
      <goods-list :goods="goods[currentType].list"></goods-list>
    </bscroll>
  </div>
</template>

<script>
import { getHomeMultidata, getHomeGoodsData, getshow } from "@/network/home.js";

import HomeNavBar from "./HomeNavBar";
import HomeSwiper from "./HomeSwiper";
import HomeRecommend from "./HomeRecommend.vue";
import WeekHot from "./WeekHot.vue";
import TabControl from "@/components/common/tabcontrol/TabControl";
import GoodsList from "@/components/context/goods/GoodsList";
import Bscroll from "@/components/common/bscorll/Bscroll.vue";
export default {
  components: {
    HomeNavBar,
    HomeSwiper,
    HomeRecommend,
    WeekHot,
    TabControl,
    GoodsList,
    Bscroll,
  },
  name: "Home",
  data() {
    return {
      bannerList: [], // 轮播图数据
      recommendList: [], // 推荐数据
      tabStyle: [
        // { color: "#FF8E97" },
        { fontSize: "16px" },
        { lineHeight: "44px" },
        // { borderBottom: "2px solid #FF8E97" },
        { padding: "5px 5px" },
      ],
      titles: ["流行", "新款", "精品"],
      currentType: "pop", //默认展示的pop数据
      goods: {
        pop: {
          page: 0,
          list: [],
        },
        new: {
          page: 0,
          list: [],
        },
        sell: {
          page: 0,
          list: [],
        },
      },
      // scroll:null
    };
  },
  created() {
    this.getHomeMultidata1();
    //初始加载分类的第一页数据
    this.getHomeGoodsData("pop");
    this.getHomeGoodsData("new");
    this.getHomeGoodsData("sell");
  },
  methods: {
    //获取数据的方法
    getHomeMultidata1() {
      // 轮播图和推荐的数据
      getHomeMultidata().then((results) => {
        // console.log("首页数据====啦啦啦", results);
        this.bannerList = results.data.banner.list;
        this.recommendList = results.data.recommend.list;
      });
    },
    getHomeGoodsData(type) {
      // 分类数据（自己的数据）
      console.log("查看当前页==", this.goods[type].page, this.currentType);
      const page = this.goods[type].page + 1;
      const psum = page * 10;
      getHomeGoodsData(type, psum).then((results) => {
        // result拿到的是一个数组对象
        this.goods[type].list.push(...results);
        // console.log("goods===", this.goods);
        this.goods[type].page = page;
      });
    },
    getShow() {
      getshow().then((res) => {
        console.log(res);
      });
    },
    //点击事件方法
    tabClick(index) {
      console.log(this.currentType, "====", index);
      //根据点击的内容，判断当前传给接口哪个类型值
      switch (index) {
        case 0:
          this.currentType = "pop";
          break;
        case 1:
          this.currentType = "new";
          break;
        case 2:
          this.currentType = "sell";
          break;
      }
    },
  },
  computed: {},
};
</script>

<style scoped>
/* 暂时解决导航固定不滚动 */
.home {
  /* margin-top: 44px; */
  /* vh视口高度 */
  position: relative;
  height: 667px;
}
.home-nav-bar-bak {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 9;
}
/* tabcontrol停留效果 stick--临时实现 */
.tab-control {
  position: sticky;
  top: 44px;
  background-color: #fff;
  z-index: 9;
}
</style>